<div class="inner">
  <h4>Position</h4>

  <vde-property label="X" type="number" item="mark" property="x"
                ng-model="mark.properties.x.value"
                scale="mark.properties.x.scale"
                field="mark.properties.x.field"
                can-drop-style="left" style="half"></vde-property>

  <vde-property label="Y" type="number" item="mark" property="y"
                ng-model="mark.properties.y.value"
                scale="mark.properties.y.scale"
                field="mark.properties.y.field"
                can-drop-style="left" style="half"></vde-property>

  <h4>Geometry</h4>

  <div ng-init="shapes=['circle', 'square', 'cross', 'diamond', 'triangle-up', 'triangle-down']">
    <vde-property label="Shape" type="select" options="shapes"
                  item="mark" property="shape"
                  ng-model="mark.properties.shape.value"
                  scale="mark.properties.shape.scale"
                  field="mark.properties.shape.field"
                  can-drop-style="left" style="half"></vde-property>
  </div>

  <vde-property label="Size" type="number" item="mark" property="size"
                ng-model="mark.properties.size.value"
                scale="mark.properties.size.scale"
                field="mark.properties.size.field"
                can-drop-style="left" style="half"></vde-property>

  <br clear="all" />

  <h4>Fill</h4>

  <vde-property label="Color" type="color" item="mark"
                property="fill" ng-model="mark.properties.fill.value"
                scale="mark.properties.fill.scale"
                field="mark.properties.fill.field"
                can-drop-style="left" style="full"></vde-property>

  <vde-property label="Opacity" type="range" min="0" max="1" step="0.1"
                item="mark" property="fillOpacity"
                ng-model="mark.properties.fillOpacity.value"
                scale="mark.properties.fillOpacity.scale"
                field="mark.properties.fillOpacity.field"
                can-drop-style="left" style="full"></vde-property>

  <h4>Stroke</h4>

  <vde-property label="Color" type="color" item="mark" property="stroke"
                ng-model="mark.properties.stroke.value"
                scale="mark.properties.stroke.scale"
                field="mark.properties.stroke.field"
                can-drop-style="left" style="full"></vde-property>

  <vde-property label="Width" type="range" min="0" step="0.25" max="10"
                item="mark" property="strokeWidth"
                ng-model="mark.properties.strokeWidth.value"
                scale="mark.properties.strokeWidth.scale"
                field="mark.properties.strokeWidth.field"
                can-drop-style="left" style="full"></vde-property>
</div>